// edX: Certificates - Variables
// ====================

// units
$baseline-v: 20px;                                                  // vertical baseline
$baseline-h: 20px;                                                  // horizontal baseline

// ====================

// colors - basic
$black: rgb(10,10,10);                                              // system black
$black-t: rgb(0,0,0);
$black-t0: rgba($black,0.125);
$black-t1: rgba($black,0.25);
$black-t2: rgba($black,0.50);
$black-t3: rgba($black,0.75);

$white: rgb(250,250,250);                                          // system white
$white-t: rgb(255,255,255);
$white-t0: rgba($white,0.125);
$white-t1: rgba($white,0.25);
$white-t2: rgba($white,0.50);
$white-t3: rgba($white,0.75);

$gray: rgb(53, 58, 61);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
$gray-d5: shade($gray,90%);
$gray-d6: shade($gray,95%);
$gray-t0: rgba($gray,0.125);
$gray-t1: rgba($gray,0.25);
$gray-t2: rgba($gray,0.50);
$gray-t3: rgba($gray,0.75);

// shadows
$shadow: rgba($black-t,0.2);
$shadow-l1: rgba($black-t,0.1);
$shadow-l2: rgba($black-t,0.05);
$shadow-d1: rgba($black-t,0.4);
$shadow-d2: rgba($black-t,0.6);

// colors - default
$edx-blue: rgb(58, 162, 224);
$edx-blue-l1: tint($edx-blue,20%);
$edx-blue-l2: tint($edx-blue,40%);
$edx-blue-l3: tint($edx-blue,60%);
$edx-blue-l4: tint($edx-blue,80%);
$edx-blue-l5: tint($edx-blue,90%);
$edx-blue-d1: shade($edx-blue,20%);
$edx-blue-d2: shade($edx-blue,40%);
$edx-blue-d3: shade($edx-blue,60%);
$edx-blue-d4: shade($edx-blue,80%);
$edx-blue-d5: shade($edx-blue,90%);
$edx-blue-s1: saturate($edx-blue,15%);
$edx-blue-s2: saturate($edx-blue,30%);
$edx-blue-s3: saturate($edx-blue,45%);
$edx-blue-u1: desaturate($edx-blue,15%);
$edx-blue-u2: desaturate($edx-blue,30%);
$edx-blue-u3: desaturate($edx-blue,45%);
$edx-blue-t0: rgba($edx-blue,0.125);
$edx-blue-t1: rgba($edx-blue,0.25);
$edx-blue-t2: rgba($edx-blue,0.50);
$edx-blue-t3: rgba($edx-blue,0.75);

$edx-pink: rgb(182,37,104);
$edx-pink-l1: tint($edx-pink,20%);
$edx-pink-l2: tint($edx-pink,40%);
$edx-pink-l3: tint($edx-pink,60%);
$edx-pink-l4: tint($edx-pink,80%);
$edx-pink-l5: tint($edx-pink,90%);
$edx-pink-d1: shade($edx-pink,20%);
$edx-pink-d2: shade($edx-pink,40%);
$edx-pink-d3: shade($edx-pink,60%);
$edx-pink-d4: shade($edx-pink,80%);
$edx-pink-d5: shade($edx-pink,90%);
$edx-pink-s1: saturate($edx-pink,15%);
$edx-pink-s2: saturate($edx-pink,30%);
$edx-pink-s3: saturate($edx-pink,45%);
$edx-pink-u1: desaturate($edx-pink,15%);
$edx-pink-u2: desaturate($edx-pink,30%);
$edx-pink-u3: desaturate($edx-pink,45%);
$edx-pink-t0: rgba($edx-pink,0.125);
$edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75);

// ====================

// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;

// ====================

// grid
@import "neat/neat-helpers";

// grid (neat-based)
$max-width: 1280px;
$grid-columns: 12;                                                  // make grid 12 columns
$gutter: $baseline-v;                                               // gutter b/t columns

// grid (neat-based) - responsive
$bp-m: new-breakpoint(max-width 499px 4);                           // mobile devices - make grid 4 columns
$bp-ds: new-breakpoint(min-width 500px max-width 759px 6);          // small displays - make grid 6 columns
$bp-dm: new-breakpoint(min-width 760px max-width 899px 12);        // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width 900px 12);                        // large displays - make grid 12 columns

// ====================

// timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
$tmg-s1: 1.0s;
$tmg-avg: 0.75s;
$tmg-f1: 0.50s;
$tmg-f2: 0.25s;
$tmg-f3: 0.125s;

// animation-based settings
$anim-distance-offviewport: ($baseline-h*100);                         // for larger/page-level animations

// ====================

// application: general actions
$color-primary: $edx-blue-d1;
$color-secondary: $edx-blue-l1;
$color-tertiary: $gray-l1;
$color-quarternary: $gray-l2;

// application: general links
$color-link: $edx-blue-d1;
$color-link-focus: $edx-blue;
$color-link-active: $edx-blue;
$color-link-visited: $edx-blue-d2;

// application: actions & links (button-focused)
$bg-action-primary: $color-primary;
$bg-action-primary-focus: saturate($color-primary, 35%);
$bordercolor-action-primary: saturate($color-primary, 15%);
$bordercolor-action-primary-focus: saturate($color-primary, 35%);
$color-action-primary: tint($color-primary, 90%);
$color-action-primary-focus: tint($color-primary, 95%);

$bg-action-secondary: $color-secondary;
$bg-action-secondary-focus: saturate($color-secondary, 35%);
$bordercolor-action-secondary: saturate($color-secondary, 15%);
$bordercolor-action-secondary-focus: saturate($color-secondary, 35%);
$color-action-secondary: tint($color-secondary, 90%);
$color-action-secondary-focus: tint($color-secondary, 95%);

// ====================

// application: copy & headings

$color-heading: $gray-d3;
$color-heading-secondary: $gray-d1;
$color-heading-tertiary: $gray;

$color-copy: $gray-l1;
$color-copy-lead: $gray-d2;
$color-copy-supplemental: $gray-l1;

// ====================

// application: states
$bg-selected: $edx-blue-t1;
$color-selected: $edx-blue-s1;

// ====================

// application: view elements
$bg-view: $gray-l6;

$bg-header-main: $white;
$color-header-main: $black;

$bg-content: $gray-l6;
$color-content: $gray-d1;

$bg-content-main: $gray-l5;
$color-content-main: $gray-d1;

$bg-footer-main: transparent;
$color-footer-main: $gray;
